<template>
  <el-dialog
    v-model="dialogVisible"
    title="确认收货"
    width="500px"
    :before-close="close"
  >
    <el-form
      ref="baseFormRef"
      :model="baseFrom"
      label-position="left"
      label-width="90px"
      :rules="rules"
    >
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="收货备注" prop="receipt_mark ">
            <VabInputForm
              v-if="!isDisabled"
              type="textarea"
              v-model="baseFrom.receipt_mark"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="签收单上传" prop="receipt_form_img">
            <VabUploadFile
              v-if="!isDisabled"
              ref="vabUploadFileRef"
              :accept="accept"
              title="上传"
              tip="支持word、Excel、PDF、JPG、JPEG、PNG上传(最多上传一份)"
              :style="{
                width: '100%',
                height: '30px',
                'font-size': '14px',
              }"
              @expose-path="
                (path: string) => {
                  baseFrom.receipt_form_img = path
                }
              "
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <span class="flex_center">
        <VabButton
          type="primary"
          title="确认收货"
          @click="submitForm(baseFormRef)"
        />
        <VabButton title="取消" @click="dialogVisible = false" />
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
  import { FormInstance } from 'element-plus'
  import { ref } from 'vue'
  import { orderConfirmReceipt } from '~/src/api/dms/home/order'

  /**
   * @var
   */
  const proxy: any = getCurrentInstance()?.proxy
  const baseFormRef = ref()
  const vabUploadFileRef = ref()
  const orderNo = ref('')
  const loading = ref(false)
  const dialogVisible = ref(false)
  const baseFrom = ref<any>({
    receipt_mark: '',
    receipt_form_img: '',
  })
  const rules = {
    receipt_mark: [
      {
        required: true,
        message: '备注不能为空',
        trigger: 'blur',
      },
    ],
    receipt_form_img: [
      {
        required: true,
        message: '签收单不能为空',
        trigger: 'blur',
      },
    ],
  }
  const accept = '.docx,.doc,.xls,.xlsx,.pdf,.jpg,.png,.jpeg'
  const isDisabled = ref(false)
  /**
   * @method
   */

  const emit = defineEmits(['refresh'])

  const open = async ({ order_status, order_no }: any) => {
    dialogVisible.value = true
    // 是否禁用确认收货
    isDisabled.value = order_status == 140 ? false : true
    loading.value = true
    orderNo.value = order_no
  }
  const close = () => {
    dialogVisible.value = false
  }
  // 提交
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return

    await formEl.validate((valid, fields) => {
      if (!valid) return

      const { receipt_mark } = baseFrom.value
      const { list } = vabUploadFileRef.value

      baseFrom.value = {
        receipt_mark,
        order_no: orderNo.value,
        receipt_form_img: JSON.stringify([
          {
            response: list[0]?.url || '',
            name: list[0]?.name || '',
          },
        ]),
      }

      orderConfirmReceipt({ ...baseFrom.value }).then((res: any) => {
        proxy.$Message('确认收货成功!', 'success')
        close()
        emit('refresh')
      })
    })
  }

  defineExpose({
    open,
    close,
  })
</script>
<style scoped>
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
</style>
